<template>
	<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu':'']" style="padding-top: 30px;">
		<view class="cu-item" :class="menuArrow?'arrow':''">
			<view class="content" style="display: flex;align-items: center;">
				<text class="cuIcon-titles text-orange"></text>活动名称：{{activityName}}
			</view>
		</view>
		<view class="cu-form-group">
			<textarea 
			v-model="msg" 
			maxlength="-1" 
			:disabled="modalName!=null" 
			@input="textareaAInput" 
			placeholder="请把您的评价告诉大家:"></textarea>
		</view>
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				图片上传
			</view>
			<view class="action">
				{{imgList.length}}/1
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub" style="justify-content: center;">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
				 <image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
		<button @click="send" style="background-color: #FFFFFF;">发送评价</button>
		<view style="height: 60px;text-align: center;margin-top:20px;">
			<view style="line-height: 1.8;">
				CDIO-1组&copy;版权所有
			</view>
			<view style="line-height: 1.8;">
				<a style="text-decoration: none;color: #000000;" href="http://www.miit.gov.cn/">备案号:苏ICP备19058910号</a>
			</view>
		</view>
	</view>
</template>

<script>
	import uploadImage from '@/common/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				userId: '',
				activityId: '',
				activityName: '',
				Authorization: '',
				menuBorder: false,
				menuArrow: false,
				menuCard: true,
				modalName: null,
				textareaAValue:'',
				msg:'',
				imgList: [],
				imgUrl:[],
				fileType:[],
				file:[],
			}
		},
		onLoad(option) {
			this.userId = option.userId
			this.activityId = option.activityId
			this.activityName = option.activityName
			this.Authorization = option.Authorization
		},
		methods: {
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},
			sendoss(){
				for (let i = 0; i < this.file.length; i++) {
				    //显示消息提示框
				    uni.showLoading({
				      mask: true
				    })
				    uploadImage(this.file[i], 'pingjia/',
				        result => {
				        uni.hideLoading();
						this.imgUrl[i] = String(result)
				    }
				    )
				}
			},
			ChooseImage() {
				uni.chooseImage({
				    count: 1, // 默认最多一次选择9张图
				    sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
					sizeType: ['original'],
				    success: res=> {
						
						if(this.imgList.length == 0) {
							this.file[0] = res.tempFilePaths[0]
							this.fileType[0] = res.tempFiles[0]
						}else if(this.imgList.length == 1) {
							this.file[1] = res.tempFilePaths[0]
							this.fileType[1] = res.tempFiles[0]
						}
						this.sendoss()
						
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						}else {
							this.imgList = res.tempFilePaths
						}
				    }
				})
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '亲亲',
					content: '确定要删除？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgUrl.splice(e.currentTarget.dataset.index, 1)
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			send() {
				if(this.msg) {
					if(this.imgUrl.length != 0){
						let img = this.imgUrl[0]
						let that = this
						uni.request({
							url:'http://101.37.15.60:8080/comments/',
							method:'POST',
							data:{
								activityId: that.activityId,
								commentPic: img,
								content: that.msg,
								userId: that.userId,
							},
							header: {
							    'Authorization': 'Bearer '+that.Authorization
							},
							success(res) {
								uni.showToast({
								    title: res.data.message,
								    duration: 500
								})
								setTimeout(function() {
									uni.navigateTo({
										url: './took',
									    success: res => {}
									});
								},700)
							}
						})
					}else {
						uni.showToast({
							icon: 'none',
						    title: '请选择图片！',
						    duration: 500
						})
					}
				}else {
					uni.showToast({
						icon: 'none',
					    title: '评价不能为空',
					    duration: 500
					})
				}
			}
		}
	}
</script>

<style scoped>
</style>
